import { useState, useEffect } from 'react'
import './index.scss'
import { useLocation, useHistory } from 'react-router-dom'
import Nav from "../../component/Nav/index"
import { DropdownMenu, Empty } from 'react-vant';
//接口
import { getpur } from '../../api/house'

export const Purchase = () => {
    const { state: { name } } = useLocation()
    const { push } = useHistory()
    const [value, setValue] = useState({
        qs: '',
        prov: '',
        name: ''
    });
    const [data, setData] = useState([])
    const option1 = [
        { text: '公房', value: '公房' },
        { text: '商品房', value: '商品房' },
        { text: '其他', value: '其他' },
        { text: '经济房', value: '经济房' },
    ];
    const option2 = [
        { text: '山东', value: '山东' },
        { text: '上海', value: '上海' },
        { text: '北京', value: '北京' },
        { text: '河南', value: '河南' },
        { text: '山西', value: '山西' },
    ];
    useEffect(() => {
        const getList = async () => {
            let res = await getpur({ payload: value })
            setData(res.data)
        }
        getList()
    }, [value])
    return (
        <div className="purchase">
            <Nav>{name}</Nav>
            <div className="purchase-main">
                <div className="dropdown">
                    <DropdownMenu value={value} onChange={setValue}>
                        <DropdownMenu.Item name="qs" options={option1} title="房产类型" />
                        <DropdownMenu.Item name="prov" options={option2} title="区域选择" />
                    </DropdownMenu>
                </div>
                <div className="pur-content">
                    {
                        data.length ? data.map(item => {
                            return <div className="list-box" key={item.id} onClick={() => {
                                push({
                                    pathname: "/detail",
                                    state: {
                                        data: item
                                    }
                                })
                            }}>
                                <img src={item.img} alt="" />
                                <div className='list-item'>
                                    <h3>{item.name}</h3>
                                    <p>{item.mianji}平{item.fangxing} 1厅/{item.xq}</p>
                                    <div>
                                        <h3>{item.jiage}</h3>/m<sup>2</sup>
                                    </div>
                                    <span>小区</span>
                                </div>
                            </div>
                        }) : <Empty description="暂无数据" />
                    }
                </div>
            </div>
        </div>
    );
};

export default Purchase;